<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8">
	    <title>校车补签</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	    <link rel="stylesheet" href="../css/main.css">
	    <style>
	    	.header2 {
				width: 100%;
				height: 40px;
				z-index: 100;
			    position: fixed;
			    top: 40px;
			}
			
			.header2 div {
				float: left;
				width: 50%;
				height: 40px;
				text-align: center;
				font-size: 16px;
				line-height: 40px;
				font-family: 微软雅黑;
			}
			
			.header2>div {
				background: white;
			}
			
			.header_user {
				color: #ffbb4c;
				border-bottom: solid 3px #ffbb4c;
			}
			
			/*补签申请*/
			.user_name {
			    width: 90%;
			    height: 40px;
			    font-size: 16px;
			    line-height: 40px;
			    margin: 15px 5% 5px 5%;
			    box-sizing: border-box;
			    padding-left: 0.75em;
			    border: solid 1px #8e84ff;
			}
			
			.info-textarea {
			    min-height: 130px;
			}
			
			.offer {
			    background: #8e84ff;
			    width: 90%;
			    height: 40px;
			    margin:  10px 5% 20px 5%;
			    margin-bottom: 20px;
			    text-align: center;
			    font-size: 16px;
			    color: #fff;
			    line-height: 40px;
			    letter-spacing: 10px;
			    border-radius: 5px;
			}
			
			/*申请记录*/
			.signIn-record {
				width: 100%;
				margin-top: 10px;
			}
			
			.list {
				width: 90%;
				height: auto;
				background: #eceaff;
				margin-left: 5%;
				border-radius: 6px;
				border: solid 1px #b6b6b6;
				margin-bottom: 20px;
				
			}
			
			.list_content {
				padding-top: 10px;
				padding-left: 10px;
				padding-right: 10px;
				line-height: 20px;
				font-size: 14px;
				color: #454545;
				margin-bottom: 5px;
			}
			
			.list_content p {
				margin: 0;
			}
			
			.list_state {
				float: right;
				margin-right: 2%;
				margin-top: 10px;
				width: 30%;
				position: relative;
				height: 80px;
			}
	    </style>
	</head>
	<body>
		<div id="signIn">
			<div class="header">
	           	<div class="header_title">校车补签</div>
	            <a onclick="history.back()">
	                <img src="../image/return.png" alt="" class="return">
	            </a>
	        </div>
	    	<div class="header2">
	            <div class="header_user" @click="apply(false)">补签申请</div>
		        <div @click="record(true)">申请记录</div>
		    </div>
		    <div style="height: 95px;"></div>
		    <div class="signIn-apply" v-if="!theApply">
		    	<input class="user_name" placeholder="请选择补签日期" />
		    	<select class="user_name">
		    		<option>上学</option>
		    		<option>放学</option>
		    	</select>
		    	<textarea class="user_name info-textarea" placeholder="请输入补签事由"></textarea>
		    	<div class="offer">提交申请</div>
		    </div>
		    <div class="signIn-record" v-if="theRecord">
                <div class="list">
                    <div class="result2">通过</div>
                    <div class="list_content">
                        <p>
                            <span>类别 :</span>
                            <span>上学</span>
                        </p>
                        <p>
                            <span>日期 :</span>
                            <span>2020-01-15</span>
                        </p>
                        <p>
                            <span>事由 :</span>
                            <span>忘记带卡</span>
                        </p>
                    </div>
                </div>
                <div class="list">
                    <div class="result2">审核</div>
                    <div class="list_content">
                        <p>
                            <span>类别 :</span>
                            <span>上学</span>
                        </p>
                        <p>
                            <span>日期 :</span>
                            <span>2020-01-15</span>
                        </p>
                        <p>
                            <span>事由 :</span>
                            <span>忘记带卡</span>
                        </p>
                    </div>
                </div>
                <div class="list">
                    <div class="result2">驳回</div>
                    <div class="list_content">
                        <p>
                            <span>类别 :</span>
                            <span>上学</span>
                        </p>
                        <p>
                            <span>日期 :</span>
                            <span>2020-01-15</span>
                        </p>
                        <p>
                            <span>事由 :</span>
                            <span>忘记带卡</span>
                        </p>
                    </div>
                </div>
		    </div>
		</div>
		<script src="/scriptZIP/vue.min.js"></script>
		<script>
			new Vue({
				el:"#signIn",
				data:{
					theApply:false,
					theRecord:false,
				},
				methods: {
					apply: function (state) {
						this.theApply=state;
						this.theRecord=state;
					},
					record: function (state) {
						this.theApply=state;
						this.theRecord=state;
					}
				}
			})
		</script>
	</body>
</html>
